<template>
  <div class="mod-echarts">
    <el-row :gutter="20">
      <el-col :span="8">
        <el-card>
          <div id="jqyp" class="chart-box"></div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card>
          <div id="gzhfl" class="chart-box"></div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card>
          <div id="yhdb" class="chart-box"></div>
        </el-card>
      </el-col>

    </el-row>
    <el-row :gutter="20">
      <el-col class="last_col" :span="12">
        <el-card>
          <div id="ssbj" class="chart-box">
            <div class="boxall_modern_nei" style="height: 274px;overflow: hidden;">
              <div class="alltitle res">
                <i class="iconfont icon-real-time-alarm flo_l"></i> <span class="flo_l"
                                                                          style="margin-left: 5px;">实时报警</span>
                <!-- <dv-decoration-1
                    style=" position: absolute;width: 100px;height: 20px;display: inline-block;left: 95px;top: 10px;" /> -->
                <el-date-picker @change="dateRangeSel" class="flo_r" value-format="yyyy-MM-dd" v-model="valueDate"
                                type="daterange" range-separator="~" :start-placeholder="bjslVal.sttime"
                                :end-placeholder="bjslVal.entime" :picker-options="pickerOptions">
                </el-date-picker>
                <dv-decoration-1
                  style="position: relative;width: 100px;height: 20px;display: inline-block;top: 10px;float:left;margin-left: 10px;"/>
                <div class="clearBoth"></div>
              </div>
              <div class="sycm">
                <div class="tit02"><span>实时统计</span></div>
                <ul class="clearfix" style="padding: 0;">
                  <li>
                    <h2 class="counter color_blue dsdigitFont">
                      <CountUp class="" :delay="delay" :endVal="bjslVal.firenum" :duration="2.5" :options="options">
                      </CountUp>
                    </h2>
                    <span>火警数量</span>
                  </li>
                  <li>
                    <h2 class="counter color_blue dsdigitFont">
                      <CountUp :delay="delay" :endVal="bjslVal.yjnum" :duration="2.5" :options="options"></CountUp>
                    </h2>
                    <span>预警数量</span>
                  </li>
                  <li>
                    <h2 class="counter color_blue dsdigitFont">
                      <CountUp :delay="delay" :endVal="bjslVal.gznum" :duration="2.5" :options="options"></CountUp>
                    </h2>
                    <span>故障数量</span>
                  </li>
                </ul>
                <div style="height: 5px;"></div>
              </div>
            </div>

          </div>
        </el-card>
      </el-col>

      <el-col class="last_col" :span="12">
        <el-card>
          <div id="gzzs" class="chart-box">
            <div class="boxall_modern_nei" style="height: 100%;">
              <div class="alltitle res"><i class="iconfont icon-guzhangchakan res"
                                           style="font-size: 0.18rem;float: left;margin-right: 5px;"></i>
                <span style="float: left;">故障</span>
                <el-date-picker :clearable="false" v-model="queryParam.value"
                                :format="'yyyy-MM 第' + queryParam.week + '周'" @change="weekChange"
                                value-format="yyyy-M-d"
                                class="inp flo_r" size="medium" type="week" placeholder="请选择"
                                :picker-options="{'firstDayOfWeek': 1}">
                </el-date-picker>
                <dv-decoration-1
                  style="position: relative;width: 100px;height: 20px;display: inline-block;top: 10px;float:left;margin-left: 10px;"/>
                <div class="clearBoth"></div>
              </div>
              <div class="addnew" style="height: 207px;">
                <div class="allnav flo_l" style="height: 100%;width: 50%;" id="gzzs1">
                  <div id="gzzs1_left" class="gzzs1_left flo_l" style="width: 48%;height: 92%;"></div>
                  <div id="gzzs1_right" class="gzzs1_right flo_r" style="width: 48%;height: 92%;"></div>
                </div>
                <div class="allnav flo_r" style="height: 100%;width: 50%;" id="gzzs2">
                  <div id="gzzs2_left" class="gzzs2_left flo_l" style="width: 48%;height: 92%;"></div>
                  <div id="gzzs2_right" class="gzzs2_right flo_r" style="width: 48%;height: 92%;"></div>
                </div>
              </div>
            </div>

          </div>
        </el-card>
      </el-col>

    </el-row>
    <el-row :gutter="20">
      <el-col class="last_col" :span="24">
        <el-card>
          <div style="height: 270px;overflow: hidden;">
            <div class="boxall_modern_nei zxbj" style="height: 238px;overflow: hidden;">
              <div class="alltitle">
                <i class="iconfont icon-zuixin res"
                   style="font-size: 0.22rem;top:1px;float: left;margin-right: 5px;"></i>
                <span style="float: left;">最新报警</span>
                <dv-decoration-1
                  style="position: relative;width: 100px;height: 20px;display: inline-block;top: 10px;float:left;margin-left: 10px;"/>
                <span style="float: right;" class="zxbj_yqrwqr"><span class="qr_focus">未确认</span><span>已确认</span></span>
                <div class="clearBoth"></div>
              </div>
              <div v-if="config.data.length == 0"
                   style="width: 100%;height: 200px;line-height: 200px;text-align: center;color: #bcc7cd;">
                -- 暂无数据 --
              </div>
              <dv-scroll-board v-else class="home_zxbj" :config="config" style="width:100%;height:220px" :key="key"/>
            </div>
          </div>

        </el-card>
      </el-col>

    </el-row>
  </div>
</template>

<script>
import $ from 'jquery'
import CountUp from 'vue-countup-v2'
import echarts from 'echarts'

export default {
  components: {
    CountUp
  },
  data() {
    return {
      pickerOptions: {
        disabledDate(time) {
          // console.log(time)
          return time.getTime() > Date.now();
        }
      },
      delay: 2000,
      options: {
        useEasing: true,
        useGrouping: true,
        separator: ',',
        decimal: '.',
        prefix: '',
        suffix: '',
      },
      valueDate: "",
      bjslVal: {
        firenum: 0,
        yjnum: 0,
        gznum: 0,
        sttime: "",
        entime: ""
      },
      queryParam: {
        value: '',
        week: ''
      },
      config: {
        data: [],
        header: ['报警地点', '报警来源', '报警时间'],
        align: "center",
        oddRowBGC: "rgba(0,0,0,.5)",
        evenRowBGC: "rgba(255,255,255,.5)",
        headerBGC: "rgba(132,128,122,0.5)"
      },
      key: 0,
      chartLine: null,
      chartBar: null,
      chartPie: null,
      chartScatter: null
    }
  },
  beforeCreate() {
    //rem根像素
    var whei = $(window).width();
    $("html").css({
      fontSize: whei / 20
    });
    $(window).resize(function () {
      var whei = $(window).width();
      $("html").css({
        fontSize: whei / 20
      })
    });
  },
  mounted() {

    if (window.localStorage.getItem("unitHomeRefshFlag") == "false") {
      // this.$router.go(0);
      window.localStorage.setItem("unitHomeRefshFlag", "true");
    }

    let _that = this;


    //实时报警
    this.getSsbjData();

    //实时报警默认查询时间
    this.bjslVal.sttime = this.getCurrentDate();
    this.bjslVal.entime = this.getCurrentDate();

    //最新报警
    this.getZxbjList(0);
    $("body").on("click", ".zxbj_yqrwqr span", function () {
      $(".zxbj_yqrwqr span").removeClass("qr_focus");
      $(this).addClass("qr_focus");
      _that.getZxbjList($(this).index());
    });

    //故障恢复率数据获取
    this.$http({
      url: this.$http.adornUrl('/api-operation/devHis/faultEffectiveRecoveryRate'),
      method: 'get',
      params: this.$http.adornParams({
        month: this.getCurrentDates("yyyymm")
      })
    }).then(({
               data
             }) => {
      if (data.code == 0) {
        let datax = [];
        let datay = [];
        Object.values(data.data).forEach((item, index) => {
          datax.push(item.toFixed(2));
        });
        Object.keys(data.data).forEach((item, index) => {
          datay.push(item);
        });
        setTimeout(function () {
          _that.gzHfl(datax, datay);
        }, 500)
      } else {
        alert("故障恢复率数据获取失败！");
      }
    });

    //警情研判
    let jqfhYear;
    let jqfhDataY1 = [100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100]; //复核率
    let jqfhDataY2 = [100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100]; //处置率
    let jqfhDataY1_flag = false;
    let jqfhDataY2_flag = false;
    this.$http({
      url: this.$http.adornUrl('/api-operation/devHisWaterZcRate/getMonthRate'),
      method: 'get',
      params: this.$http.adornParams({})
    }).then(({
               data
             }) => {
      if (data.code == 0) {
        if (data.data.length == 0) {
          jqfhYear = this.doHandleYear();
          jqfhDataY1 = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]; //复核率
          jqfhDataY1_flag = true;
        } else {
          jqfhYear = ((data.data[0]).upTime).substring(0, 4);
          data.data.forEach((item, index) => {
            let mounthString = (item.upTime).substring(item.upTime.length - 2);
            mounthString = parseInt(mounthString);
            let monthIndex;
            mounthString < 10 ? monthIndex = (mounthString.toString()).substring(mounthString.length - 1) : monthIndex = mounthString;
            if (item.fuheRate != null) {
              jqfhDataY1[monthIndex - 1] = parseInt((item.fuheRate)).toFixed(0);
            }
          });
          jqfhDataY1_flag = true;
        }
      } else {
        alert("复核率获取失败！");
      }
    });

    //警情处置
    this.$http({
      url: this.$http.adornUrl('/api-operation/devHisWaterZcRate/getMonthRate'),
      method: 'get',
      params: this.$http.adornParams({})
    }).then(({
               data
             }) => {
      if (data.code == 0) {
        if (data.data.length == 0) {
          jqfhDataY2 = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]; //处置率
          jqfhDataY2_flag = true;
        } else {
          data.data.forEach((item, index) => {
            let mounthString = (item.upTime).substring(item.upTime.length - 2);
            mounthString = parseInt(mounthString);
            let monthIndex;
            mounthString < 10 ? monthIndex = (mounthString.toString()).substring(mounthString.length - 1) : monthIndex = mounthString;
            if (item.chuzhiRate != null) {
              jqfhDataY2[monthIndex - 1] = parseInt((item.chuzhiRate)).toFixed(0);
            }
          });
          jqfhDataY2_flag = true;
        }
      } else {
        alert("处置率获取失败！");
      }
    });

    //警情研判数据渲染
    let timers = setInterval(function () {
      if (jqfhDataY1_flag == true && jqfhDataY2_flag == true) {
        setTimeout(function () {
          _that.jqfh(jqfhDataY1, jqfhDataY2, jqfhYear);
        }, 500);
        clearInterval(timers);
      }
    }, 500);


    //隐患对比数据获取
    this.$http({
      url: this.$http.adornUrl('/api-operation/devHis/dangerContrast'),
      method: 'get',
      params: this.$http.adornParams({
        year: new Date().getFullYear()
      })
    }).then(({
               data
             }) => {
      let datas = [{
        value: 0,
        name: '一季度'
      },
        {
          value: 0,
          name: '二季度'
        },
        {
          value: 0,
          name: '三季度'
        },
        {
          value: 0,
          name: '四季度'
        }
      ];
      if (data.code == 0) {
        datas[0].value = data.data.FirstQuarter;
        datas[1].value = data.data.SecondQuarter;
        datas[2].value = data.data.ThirdQuarter;
        datas[3].value = data.data.FourthQuarter;
        setTimeout(function () {
          _that.yhdb(datas);
        }, 500)
      } else {
        alert("隐患对比数据获取失败");
      }
    });

    //故障总数
    this.getDay(); //周选择器初始化
    this.getCurrentWeekstenDay(function (startDate, endDate) {
      setTimeout(function () {
        _that.getGzzsData(startDate, endDate, '/api-operation/devHis/faultContrast');
      }, 1000)
    });


    /*this.$http({
      url: this.$http.adornUrl('/uint'),
      method: 'post',
    }).then(({data}) => {})*/
  },
  activated() {
    // 由于给echart添加了resize事件, 在组件激活时需要重新resize绘画一次, 否则出现空白bug
    if (this.chartLine) {
      this.chartLine.resize()
    }
    if (this.chartBar) {
      this.chartBar.resize()
    }
    if (this.chartPie) {
      this.chartPie.resize()
    }
    if (this.chartScatter) {
      this.chartScatter.resize()
    }
  },
  methods: {
    getCurrentDates(type) {
      var myDate = new Date();
      var year = myDate.getFullYear(); //获取完整的年份(4位,1970-????)
      var month = myDate.getMonth() + 1; //获取当前月份(0-11,0代表1月)
      var date = myDate.getDate(); //获取当前日(1-31)
      month <= 9 ? month = "0" + month : month;
      date <= 9 ? date = "0" + date : date;
      if (type == "yyyy") {
        return year
      } else if (type == "yyyymm") {
        return year + "-" + month
      } else if (type == "yyyymmdd") {
        return year + "-" + month + "-" + date;
      }
    },
    doHandleYear(tYear) {
      var myDate = new Date();
      var tYear = myDate.getFullYear();
      return tYear;
    },
    getPath() {
      console.log(this.$route.path);
    },
    //日期范围选择
    dateRangeSel() {
      let _that = this;
      let daterange = [];
      let obj = this.valueDate;
      console.log(obj[0] + "--" + obj[1]);
      this.$http({
        url: this.$http.adornUrl('/api-operation/bigData3/alarm'),
        method: 'get',
        params: this.$http.adornParams({
          beginTime: obj[0],
          endTime: obj[1]
        })
      }).then(({
                 data
               }) => {
        if (data.code == 0) {
          this.bjslVal.firenum = data.data.fireNum;
          this.bjslVal.yjnum = data.data.warnNum;
          this.bjslVal.gznum = data.data.faultNum;
        } else {
          console.log("实时报警数据获取失败！");
        }
      });

    },
    //实时报警
    getSsbjData() {
      this.$http({
        url: this.$http.adornUrl('/api-operation/bigData3/alarm'),
        method: 'get',
        params: this.$http.adornParams({
          beginTime: this.getCurrentDate(),
          endTime: this.getCurrentDate()
        })
      }).then(({
                 data
               }) => {
        if (data.code == 0) {
          this.bjslVal.firenum = data.data.fireNum;
          this.bjslVal.yjnum = data.data.warnNum;
          this.bjslVal.gznum = data.data.faultNum;
        } else {
          alert("实时报警数据获取失败！");
        }
      });
    },
    getCurrentDate() {
      var myDate = new Date();
      var year = myDate.getFullYear(); //获取完整的年份(4位,1970-????)
      var month = myDate.getMonth() + 1; //获取当前月份(0-11,0代表1月)
      var date = myDate.getDate(); //获取当前日(1-31)
      month <= 9 ? month = "0" + month : month;
      date <= 9 ? date = "0" + date : date;
      return year + "-" + month + "-" + date;
    },
    getZxbjList(flag) { //最新报警
      let _that = this;
      this.$http({
        url: _that.$http.adornUrl('/api-operation/bigData3/new'),
        method: 'get',
        params: _that.$http.adornParams({
          read: flag
        })
      }).then(({
                 data
               }) => {
        if (data.code == 0) {
          _that.config.data = [];
          data.data.forEach((item, index) => {
            _that.config.data[index] = [item.enterpriseName, item.name, item.ztfssj];
          });
          _that.key = _that.key + 1;
        } else {
          console.log("最新报警数据获取失败！");
        }
      });
    },
    /*gzHfl(datax) { //故障恢复率
      var myChart = echarts.init(document.querySelector("#gzhfl"));
      var option = {
        title: {
          text: '故障恢复率',
          left: "0",
          top: "-1",
          textStyle: {
            color: "#bcc7cd",
            fontSize: 16
          }
        },
        toolbox: {
          'feature': {
            'saveAsImage': {}
          }
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            lineStyle: {
              color: "#dddc6b"
            }
          },
          formatter: '{c0}%'
        },
        legend: {
          show: true,
          top: "0%",
          textStyle: {
            color: "#bcc7cd",
            fontSize: "12"
          }
        },
        grid: {
          left: "3%",
          top: "18%",
          right: "3%",
          bottom: "2%",
          containLabel: true
        },

        xAxis: [{
            type: "category",
            boundaryGap: true,
            axisLabel: {
              textStyle: {
                color: "#bcc7cd",
                fontSize: 12
              }
            },
            axisLine: {
              lineStyle: {
                color: "#bcc7cd"
              }
            },

            data: [
              "上月",
              "本月",
            ]
          },
          {
            axisPointer: {
              show: false
            },
            axisLine: {
              show: false
            },
            position: "bottom",
            offset: 20
          }
        ],

        yAxis: [{
          nameTextStyle: {
            color: "#bcc7cd",
            fontSize: 12,
          },
          type: "value",
          axisTick: {
            show: false
          },
          axisLine: {
            show:false,
            lineStyle: {
              color: "#1e211d"
            }
          },
          axisLabel: {
            formatter: '{value}%',
            textStyle: {
              color: "#bcc7cd",
              fontSize: 12
            }
          },

          splitLine: {
            lineStyle: {
              color: "#bcc7cd"
            }
          }
        }],
        series: [{
            name: "",
            type: "bar",
            barWidth: "10",
            smooth: true,
            symbol: "circle",
            symbolSize: 5,
            showSymbol: false,
            lineStyle: {
              normal: {
                color: "#37d0b7",
                width: 2
              }
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [{
                      offset: 0,
                      color: "#00ffff"
                    },
                    {
                      offset: 0.8,
                      color: "rgba(1, 132, 213, 0.1)"
                    }
                  ],
                  false
                ),
                shadowColor: "rgba(0, 0, 0, 0.1)"
              }
            },
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [{
                      offset: 0,
                      color: "#00ffff"
                    },
                    {
                      offset: 1,
                      color: "rgba(1, 132, 213, 0.3)"
                    }
                  ],
                  false
                ),
                borderColor: "rgba(221, 220, 107, .1)",
                borderWidth: 5,
                barBorderRadius: [50, 50, 0, 0]
              }
            },
            data: datax
          }

        ]
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
      window.addEventListener("resize", function() {
        myChart.resize();
      });
    },*/
    gzHfl(datax, datay) {
      var myChart = echarts.init(document.querySelector("#gzhfl"));
      var option = {
        title: {
          text: '故障恢复率',
          left: "0",
          top: "-1px",
          textStyle: {
            color: "#bcc7cd",
            fontSize: 16
          }
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            lineStyle: {
              color: "#dddc6b"
            }
          },
          formatter: '{c0}%'
        },
        legend: {
          show: true,
          top: "0%",
          textStyle: {
            color: "rgba(255,255,255,.5)",
            fontSize: "12"
          }
        },
        grid: {
          left: "3%",
          top: "20%",
          right: "3%",
          bottom: "2%",
          containLabel: true
        },

        xAxis: [{
          type: "category",
          boundaryGap: true,
          axisLabel: {
            textStyle: {
              color: "rgba(255,255,255,.6)",
              fontSize: 12
            }
          },
          axisLine: {
            lineStyle: {
              color: "rgba(255,255,255,.2)"
            }
          },

          data: datay
        },
          {
            axisPointer: {
              show: false
            },
            axisLine: {
              show: false
            },
            position: "bottom",
            offset: 20
          }
        ],

        yAxis: [{
          nameTextStyle: {
            color: "rgba(255,255,255,.6)",
            fontSize: 12,
          },
          type: "value",
          axisTick: {
            show: false
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: "rgba(255,255,255,.2)"
            }
          },
          axisLabel: {
            formatter: '{value}%',
            textStyle: {
              color: "rgba(255,255,255,.6)",
              fontSize: 12
            }
          },

          splitLine: {
            lineStyle: {
              color: "rgba(255,255,255,.1)"
            }
          }
        }],
        series: [{
          name: "",
          type: "bar",
          barWidth: "6",
          smooth: true,
          symbol: "circle",
          symbolSize: 5,
          showSymbol: false,
          lineStyle: {
            normal: {
              color: "#ff55ff",
              width: 2
            }
          },
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [{
                  offset: 0,
                  color: "#ff9400"
                },
                  {
                    offset: 0.8,
                    color: "rgba(1, 132, 213, 0.1)"
                  }
                ],
                false
              ),
              shadowColor: "rgba(0, 0, 0, 0.1)"
            }
          },
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [{
                  offset: 0,
                  color: "#ff9400"
                },
                  {
                    offset: 1,
                    color: "rgba(1, 132, 213, 0.3)"
                  }
                ],
                false
              ),
              borderColor: "rgba(221, 220, 107, .1)",
              borderWidth: 5,
              // barBorderRadius: [50, 50, 0, 0]
            }
          },
          data: datax
        }

        ]
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
    //警情研判
    jqfh(dataY1, dataY2, year) {
      var option = {
        title: {
          text: '警情研判-' + year,
          left: "0",
          top: "-1px",
          textStyle: {
            color: "#bcc7cd",
            fontSize: 16
          }
        },
        toolbox: {
          'feature': {
            'saveAsImage': {}
          }
        },
        //鼠标提示工具
        tooltip: {
          trigger: 'axis',
          formatter: function (params) {
            var relVal = params[0].name;
            for (var i = 0, l = params.length; i < l; i++) {
              relVal += '<br/>' + params[i].seriesName + ' : ' + params[i].value + "%";
            }
            return relVal;
          }
        },
        xAxis: {
          // 类目类型
          type: 'category',
          // x轴刻度文字
          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
          axisTick: {
            show: false //去除刻度线
          },
          axisLabel: {
            color: "#bcc7cd", //文本颜色
          },
          axisLine: {
            show: false //去除轴线
          },
          boundaryGap: false //去除轴内间距
        },
        yAxis: {
          // 数据作为刻度文字
          type: 'value',
          axisTick: {
            show: false //去除刻度线
          },
          axisLabel: {
            formatter: '{value}%',
            color: "#bcc7cd", //文本颜色
          },
          axisLine: {
            show: false //去除轴线
          },
          boundaryGap: false //去除轴内间距
        },
        //图例组件
        legend: {
          textStyle: {
            color: "#bcc7cd", // 图例文字颜色

          },
          right: '40%' //距离右边10%
        },
        // 设置网格样式
        grid: {
          show: false, // 显示边框
          top: '18%',
          left: '0',
          right: '3%',
          bottom: '3%',
          borderColor: "#1e211d", // 边框颜色
          containLabel: true // 包含刻度文字在内
        },
        series: [{
          name: '复核率',
          // 数据
          data: dataY1,
          // 图表类型
          type: 'line',
          // 圆滑连接
          smooth: true,
          itemStyle: {
            color: '#00f2f1', // 线颜色
          }
        }, {
          name: '处置率',
          // 数据
          data: dataY2,
          // 图表类型
          type: 'line',
          // 圆滑连接
          smooth: true,
          itemStyle: {
            color: '#ed3f35' // 线颜色
          }
        }]
      };
      var myechart = echarts.init($('#jqyp')[0]);
      myechart.setOption(option);
    },
    //隐患对比
    yhdb(datacircle) {
      var radarchart = echarts.init(document.getElementById("yhdb"));
      var option = {
        title: {
          text: '隐患对比',
          left: "0",
          top: "-1px",
          textStyle: {
            color: "#bcc7cd",
            fontSize: 16
          }
        },
        toolbox: {
          'feature': {
            'saveAsImage': {}
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
          show: false,
          orient: 'vertical',
          x: 'left',
          data: ['一季度', '二季度', '三季度', '四季度']
        },
        calculable: true,
        series: [{
          name: '隐患总数对比',
          type: 'pie',
          radius: ['51%', '60%'],
          center: ['50%', '50%'],
          data: datacircle,
          color: ['#ffae8b', '#ff7da1', '#3cb2ef', '#bdb24b'],
        }]
      };
      radarchart.setOption(option);
      $(document).ready(function () {
        radarchart.resize()
      });
      window.addEventListener("resize", function () {
        radarchart.resize()
      })
    },
    //故障总数对比
    //周选择器 start
    getDay() { //周选择器初始化
      var date = new Date();
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var day = date.getDate();
      if (month < 10) {
        month = '0' + month;
      }
      if (day < 10) {
        day = '0' + day;
      }
      let nowDay = year + '-' + month + '-' + day;
      this.queryParam.week = this.getWeekInMonth(new Date(nowDay));
      this.queryParam.value = year + '-' + month + '-' + day;
    },
    getWeekInMonth(t) { // 根据日期判断是月的第几周
      if (t == undefined || t == '' || t == null) {
        t = new Date();
      } else {
        var _t = new Date();
        _t.setYear(t.getFullYear());
        _t.setMonth(t.getMonth());
        _t.setDate(t.getDate());

        var date = _t.getDate(); //给定的日期是几号

        _t.setDate(1);
        var d = _t.getDay(); //1. 得到当前的1号是星期几。
        var fisrtWeekend = d;
        if (d == 0) {
          fisrtWeekend = 1;
          //1号就是星期天
        } else {
          fisrtWeekend = 7 - d + 1; //第一周的周未是几号
        }
        if (date <= fisrtWeekend) {
          return 1;
        } else {
          return 1 + Math.ceil((date - fisrtWeekend) / 7);
        }
      }
    },
    weekChange(val) {
      let arr;
      let _that = this;
      if (val) {
        arr = val.split('-');
        this.queryParam.week = this.getWeekInMonth(new Date(val));
      }
      setTimeout(function () {
        let btimemonth = arr[1];
        let btimedate = parseInt($(".el-date-picker .start-date div span").text());
        btimemonth <= 9 ? btimemonth = "0" + btimemonth : btimemonth = btimemonth;
        btimedate <= 9 ? btimedate = "0" + btimedate : btimedate = btimedate;
        _that.getGzzsData(arr[0] + "-" + btimemonth + "-" + btimedate, _that.get7Days(arr[0] + "-" + arr[1] +
          "-" + $(".el-date-picker .start-date div span").text()), this.$http.adornUrl('/api-operation/devHis/faultContrast'));
      }, 300);

    },
    get7Days(date) { //获取当前时间一个礼拜后的日期
      var now = new Date(date);
      var nowTime = now.getTime();
      var oneDayTime = 24 * 60 * 60 * 1000;
      //显示周一
      // var ShowTime = nowTime + 5*oneDayTime ;
      var ShowTime = nowTime + (5 + 1) * oneDayTime;
      //初始化日期时间
      var myDate = new Date(ShowTime);
      var year = myDate.getFullYear();
      var month = myDate.getMonth() + 1;
      var date = myDate.getDate();
      month <= 9 ? month = "0" + month : month = month;
      date <= 9 ? date = "0" + date : date = date;
      var ssdate = year + "-" + month + "-" + date;
      return ssdate;
    },
    //周选择器 end

    //获取当前周的起止日期 start
    getCurrentWeekstenDay(callback) {
      // 按周日为一周的最后一天计算
      var date = new Date();

      // 今天是这周的第几天
      var today = date.getDay();

      //上周日距离今天的天数（负数表示）
      var stepSunDay = -today + 1;

      // 如果今天是周日
      if (today == 0) {
        stepSunDay = -7;
      }

      // 周一距离今天的天数（负数表示）

      var stepMonday = 7 - today;

      var time = date.getTime();

      var monday = new Date(time + stepSunDay * 24 * 3600 * 1000);

      var sunday = new Date(time + stepMonday * 24 * 3600 * 1000);

      // 本周一的日期 （起始日期）
      var startDate = this.transferDate(monday); // 日期变换 2018-11-10

      // 本周日的日期 （结束日期）
      var endDate = this.transferDate(sunday); // 日期变换  2018-11-10

      return callback(startDate, endDate) && callback;


    },
    transferDate(date) {

      // 年
      var year = date.getFullYear();
      // 月
      var month = date.getMonth() + 1;
      // 日
      var day = date.getDate();

      if (month >= 1 && month <= 9) {

        month = "0" + month;
      }
      if (day >= 0 && day <= 9) {

        day = "0" + day;
      }

      var dateString = year + '-' + month + '-' + day;

      return dateString;
    },
    //end

    //根据周起止日期获取故障数据
    getGzzsData(beginTime, endTime, src) {
      // alert("beginTime:"+beginTime);
      // alert("endTime:"+endTime);
      this.$http({
        url: this.$http.adornUrl(src),
        method: 'get',
        params: this.$http.adornParams({
          beginTime: beginTime,
          endTime: endTime
        })
      }).then(({
                 data
               }) => {
        if (data.code == 0) {
          let app = {
            config: {}
          };
          app.config = {
            rotate: 90,
            align: 'left',
            verticalAlign: 'middle',
            position: 'insideBottom',
            distance: 15,
            onChange: function () {
              var labelOption = {
                normal: {
                  rotate: app.config.rotate,
                  align: app.config.align,
                  verticalAlign: app.config.verticalAlign,
                  position: app.config.position,
                  distance: app.config.distance
                }
              };
              myChart.setOption({
                series: [{
                  label: labelOption
                }, {
                  label: labelOption
                }, {
                  label: labelOption
                }, {
                  label: labelOption
                }]
              });
            }
          };
          var labelOption = {
            show: true,
            position: app.config.position,
            distance: app.config.distance,
            align: app.config.align,
            verticalAlign: app.config.verticalAlign,
            rotate: app.config.rotate,
            formatter: '{c}',
            fontSize: 12,
            color: "#bcc7cd",
            rich: {
              name: {}
            }
          };

          //本周前五名
          let thisWeekTop5Unitname = [];
          let thisWeekTop5Data = [];
          let zjjsNum = [];
          if (data.data.thisWeekTop5.length != 0) {
            data.data.thisWeekTop5.forEach((item, index) => {
              item.zjNum != null ? zjjsNum[index] = {
                zj: item.zjNum,
                per: item.zjPercentage
              } : zjjsNum[index] = {
                zj: 0,
                per: 0
              };
              thisWeekTop5Unitname.push(item.unitName);
              thisWeekTop5Data.push({
                name: item.unitName,
                type: 'bar',
                barWidth: "12",
                barGap: 0,
                label: labelOption,
                emphasis: {
                  focus: 'series'
                },
                data: [item.faultNum],
                itemStyle: {
                  normal: {
                    //柱体的颜色
                    //右，下，左，上（1，0，0，0）表示从正右开始向左渐变
                    barBorderRadius: [5, 5, 0, 0],
                  }
                },
                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                  offset: 0,
                  color: this.rgba()
                },
                  {
                    offset: 1,
                    color: this.rgba()
                  }
                ], false)
              });

            });
            if (thisWeekTop5Unitname.length < 5) {
              for (let i = 0; i < (5 - data.data.thisWeekTop5.length); i++) {
                zjjsNum.push({
                  zj: 0,
                  per: 0
                });
                thisWeekTop5Unitname.push("暂无");
                thisWeekTop5Data.push({
                  name: "暂无",
                  type: 'bar',
                  barWidth: "12",
                  barGap: 0,
                  label: labelOption,
                  emphasis: {
                    focus: 'series'
                  },
                  data: [0],
                  itemStyle: {
                    normal: {
                      //柱体的颜色
                      //右，下，左，上（1，0，0，0）表示从正右开始向左渐变
                      barBorderRadius: [5, 5, 0, 0],
                    }
                  },
                  color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                    offset: 0,
                    color: this.rgba()
                  },
                    {
                      offset: 1,
                      color: this.rgba()
                    }
                  ], false)
                });
              }
            }
            this.gzzs1_left(thisWeekTop5Unitname, thisWeekTop5Data, zjjsNum);
          } else {
            let noneData = [];
            for (let k = 0; k < 5; k++) {
              noneData[k] = {
                name: "暂无",
                type: 'bar',
                barWidth: "12",
                barGap: 0,
                label: labelOption,
                emphasis: {
                  focus: 'series'
                },
                data: [0],
                itemStyle: {
                  normal: {
                    //柱体的颜色
                    //右，下，左，上（1，0，0，0）表示从正右开始向左渐变
                    barBorderRadius: [5, 5, 0, 0],
                  }
                },
                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                  offset: 0,
                  color: this.rgba()
                },
                  {
                    offset: 1,
                    color: this.rgba()
                  }
                ], false)
              }
            }
            this.gzzs1_left(["暂无", "暂无", "暂无", "暂无", "暂无"], noneData, [{
              zj: 0,
              per: 0
            }, {
              zj: 0,
              per: 0
            }, {
              zj: 0,
              per: 0
            }, {
              zj: 0,
              per: 0
            }, {
              zj: 0,
              per: 0
            }]);
          }

          //本周后五名
          let thisWeekAfter5Unitname = [];
          let thisWeekAfter5Data = [];
          let zjjsNum2 = [];
          if (data.data.thisWeekAfter5 != 0) {
            data.data.thisWeekAfter5.forEach((item, index) => {
              item.zjNum2 != null ? zjjsNum2[index] = {
                zj: item.zjNum,
                per: item.zjPercentage
              } : zjjsNum2[index] = {
                zj: 0,
                per: 0
              };
              thisWeekAfter5Unitname.push(item.unitName);
              thisWeekAfter5Data.push({
                name: item.unitName,
                type: 'bar',
                barWidth: "12",
                barGap: 0,
                label: labelOption,
                emphasis: {
                  focus: 'series'
                },
                data: [item.faultNum],
                itemStyle: {
                  normal: {
                    //柱体的颜色
                    //右，下，左，上（1，0，0，0）表示从正右开始向左渐变
                    barBorderRadius: [5, 5, 0, 0],
                  }
                },
                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                  offset: 0,
                  color: this.rgba()
                },
                  {
                    offset: 1,
                    color: this.rgba()
                  }
                ], false)
              });

            });
            if (thisWeekAfter5Unitname.length < 5) {
              for (let i = 0; i < (5 - data.data.thisWeekAfter5.length); i++) {
                zjjsNum2.push({
                  zj: 0,
                  per: 0
                });
                thisWeekAfter5Unitname.push("暂无");
                thisWeekAfter5Data.push({
                  name: "暂无",
                  type: 'bar',
                  barWidth: "12",
                  barGap: 0,
                  label: labelOption,
                  emphasis: {
                    focus: 'series'
                  },
                  data: [0],
                  itemStyle: {
                    normal: {
                      //柱体的颜色
                      //右，下，左，上（1，0，0，0）表示从正右开始向左渐变
                      barBorderRadius: [5, 5, 0, 0],
                    }
                  },
                  color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                    offset: 0,
                    color: this.rgba()
                  },
                    {
                      offset: 1,
                      color: this.rgba()
                    }
                  ], false)
                });
              }
            }
            this.gzzs1_right(thisWeekAfter5Unitname, thisWeekAfter5Data, zjjsNum2);
          } else {
            let noneData = [];
            for (let k = 0; k < 5; k++) {
              noneData[k] = {
                name: "暂无",
                type: 'bar',
                barWidth: "12",
                barGap: 0,
                label: labelOption,
                emphasis: {
                  focus: 'series'
                },
                data: [0],
                itemStyle: {
                  normal: {
                    //柱体的颜色
                    //右，下，左，上（1，0，0，0）表示从正右开始向左渐变
                    barBorderRadius: [5, 5, 0, 0],
                  }
                },
                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                  offset: 0,
                  color: this.rgba()
                },
                  {
                    offset: 1,
                    color: this.rgba()
                  }
                ], false)
              }
            }
            this.gzzs1_right(["暂无", "暂无", "暂无", "暂无", "暂无"], noneData, [{
              zj: 0,
              per: 0
            }, {
              zj: 0,
              per: 0
            }, {
              zj: 0,
              per: 0
            }, {
              zj: 0,
              per: 0
            }, {
              zj: 0,
              per: 0
            }]);
          }


          //上周前五名
          let lastWeekTop5Unitname = [];
          let lastWeekTop5Data = [];
          let zjjsNum3 = [];
          if (data.data.lastWeekTop5 != 0) {
            data.data.lastWeekTop5.forEach((item, index) => {
              item.zjNum3 != null ? zjjsNum3[index] = {
                zj: item.zjNum,
                per: item.zjPercentage
              } : zjjsNum3[index] = {
                zj: 0,
                per: 0
              };
              lastWeekTop5Unitname.push(item.unitName);
              lastWeekTop5Data.push({
                name: item.unitName,
                type: 'bar',
                barWidth: "12",
                barGap: 0,
                label: labelOption,
                emphasis: {
                  focus: 'series'
                },
                data: [item.faultNum],
                itemStyle: {
                  normal: {
                    //柱体的颜色
                    //右，下，左，上（1，0，0，0）表示从正右开始向左渐变
                    barBorderRadius: [5, 5, 0, 0],
                  }
                },
                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                  offset: 0,
                  color: this.rgba()
                },
                  {
                    offset: 1,
                    color: this.rgba()
                  }
                ], false)
              });

            });
            if (lastWeekTop5Unitname.length < 5) {
              for (let i = 0; i < (5 - data.data.lastWeekTop5.length); i++) {
                zjjsNum3.push({
                  zj: 0,
                  per: 0
                });
                lastWeekTop5Unitname.push("暂无");
                lastWeekTop5Data.push({
                  name: "暂无",
                  type: 'bar',
                  barWidth: "12",
                  barGap: 0,
                  label: labelOption,
                  emphasis: {
                    focus: 'series'
                  },
                  data: [0],
                  itemStyle: {
                    normal: {
                      //柱体的颜色
                      //右，下，左，上（1，0，0，0）表示从正右开始向左渐变
                      barBorderRadius: [5, 5, 0, 0],
                    }
                  },
                  color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                    offset: 0,
                    color: this.rgba()
                  },
                    {
                      offset: 1,
                      color: this.rgba()
                    }
                  ], false)
                });
              }
            }
            this.gzzs2_left(lastWeekTop5Unitname, lastWeekTop5Data, zjjsNum3);
          } else {
            let noneData = [];
            for (let k = 0; k < 5; k++) {
              noneData[k] = {
                name: "暂无",
                type: 'bar',
                barWidth: "12",
                barGap: 0,
                label: labelOption,
                emphasis: {
                  focus: 'series'
                },
                data: [0],
                itemStyle: {
                  normal: {
                    //柱体的颜色
                    //右，下，左，上（1，0，0，0）表示从正右开始向左渐变
                    barBorderRadius: [5, 5, 0, 0],
                  }
                },
                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                  offset: 0,
                  color: this.rgba()
                },
                  {
                    offset: 1,
                    color: this.rgba()
                  }
                ], false)
              }
            }
            this.gzzs2_left(["暂无", "暂无", "暂无", "暂无", "暂无"], noneData, [{
              zj: 0,
              per: 0
            }, {
              zj: 0,
              per: 0
            }, {
              zj: 0,
              per: 0
            }, {
              zj: 0,
              per: 0
            }, {
              zj: 0,
              per: 0
            }]);
          }

          //上周后五名
          let lastWeekAfter5Unitname = [];
          let lastWeekAfter5Data = [];
          let zjjsNum4 = [];
          if (data.data.lastWeekAfter5 != 0) {
            data.data.lastWeekAfter5.forEach((item, index) => {
              item.zjNum4 != null ? zjjsNum4[index] = {
                zj: item.zjNum,
                per: item.zjPercentage
              } : zjjsNum4[index] = {
                zj: 0,
                per: 0
              };
              lastWeekAfter5Unitname.push(item.unitName);
              lastWeekAfter5Data.push({
                name: item.unitName,
                type: 'bar',
                barWidth: "12",
                barGap: 0,
                label: labelOption,
                emphasis: {
                  focus: 'series'
                },
                data: [item.faultNum],
                itemStyle: {
                  normal: {
                    //柱体的颜色
                    //右，下，左，上（1，0，0，0）表示从正右开始向左渐变
                    barBorderRadius: [5, 5, 0, 0],
                  }
                },
                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                  offset: 0,
                  color: this.rgba()
                },
                  {
                    offset: 1,
                    color: this.rgba()
                  }
                ], false)
              });

            });
            if (lastWeekAfter5Unitname.length < 5) {
              for (let i = 0; i < (5 - data.data.lastWeekAfter5.length); i++) {
                zjjsNum4.push({
                  zj: 0,
                  per: 0
                });
                lastWeekAfter5Unitname.push("暂无");
                lastWeekAfter5Data.push({
                  name: "暂无",
                  type: 'bar',
                  barWidth: "12",
                  barGap: 0,
                  label: labelOption,
                  emphasis: {
                    focus: 'series'
                  },
                  data: [0],
                  itemStyle: {
                    normal: {
                      //柱体的颜色
                      //右，下，左，上（1，0，0，0）表示从正右开始向左渐变
                      barBorderRadius: [5, 5, 0, 0],
                    }
                  },
                  color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                    offset: 0,
                    color: this.rgba()
                  },
                    {
                      offset: 1,
                      color: this.rgba()
                    }
                  ], false)
                });
              }
            }
            this.gzzs2_right(lastWeekAfter5Unitname, lastWeekAfter5Data, zjjsNum4);
          } else {
            let noneData = [];
            for (let k = 0; k < 5; k++) {
              noneData[k] = {
                name: "暂无",
                type: 'bar',
                barWidth: "12",
                barGap: 0,
                label: labelOption,
                emphasis: {
                  focus: 'series'
                },
                data: [0],
                itemStyle: {
                  normal: {
                    //柱体的颜色
                    //右，下，左，上（1，0，0，0）表示从正右开始向左渐变
                    barBorderRadius: [5, 5, 0, 0],
                  }
                },
                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                  offset: 0,
                  color: this.rgba()
                },
                  {
                    offset: 1,
                    color: this.rgba()
                  }
                ], false)
              }
            }
            this.gzzs2_right(["暂无", "暂无", "暂无", "暂无", "暂无"], noneData, [{
              zj: 0,
              per: 0
            }, {
              zj: 0,
              per: 0
            }, {
              zj: 0,
              per: 0
            }, {
              zj: 0,
              per: 0
            }, {
              zj: 0,
              per: 0
            }]);
          }


        } else {
          alert("故障总数数据获取失败！");
        }
      });
    },
    gzzs1_left(unitname, datas, zjjsNum) {
      var app = {};
      var chartDom = document.getElementById('gzzs1_left');
      var myChart = echarts.init(chartDom);
      var option;

      var posList = [
        'left', 'right', 'top', 'bottom',
        'inside',
        'insideTop', 'insideLeft', 'insideRight', 'insideBottom',
        'insideTopLeft', 'insideTopRight', 'insideBottomLeft', 'insideBottomRight'
      ];

      app.configParameters = {
        rotate: {
          min: -90,
          max: 90
        },
        align: {
          options: {
            left: 'left',
            center: 'center',
            right: 'right'
          }
        },
        verticalAlign: {
          options: {
            top: 'top',
            middle: 'middle',
            bottom: 'bottom'
          }
        },
        position: {
          options: posList.reduce(function (map, pos) {
            map[pos] = pos;
            return map;
          }, {})
        },
        distance: {
          min: 0,
          max: 100
        }
      };


      option = {
        title: {
          text: '本周',
          right: "0",
          top: "0",
          textStyle: {
            color: "#bcc7cd",
            fontSize: 12
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          formatter: function (a) {
            let list = [];
            let listItem = '';
            let zjLabel = "";
            let zjperLabel = "";
            for (var i = 0; i < a.length; i++) {
              if (zjjsNum[i].per < 0) {
                zjperLabel = "减少率"
              } else if (zjjsNum[i].per > 0) {
                zjperLabel = "增长率"
              } else {
                zjperLabel = "增减率"
              }
              if (zjjsNum[i].zj < 0) {
                zjLabel = "减少量"
              } else if (zjjsNum[i].zj > 0) {
                zjLabel = "增长量"
              } else {
                zjLabel = "增减量"
              }
              list.push(
                '<i style="display: inline-block;margin-right:4px;width: 10px;height: 10px;background: ' + a[i]
                  .color.colorStops[1].color + ';border-radius: 50%;}"></i><span style="display:inline-block;">' +
                a[i].seriesName + '</span>：' + a[i].value +
                '<br><div style="display:inline-block"><div style="display:inline-block;width:14px"></div>' +
                zjperLabel + '：' + zjjsNum[i].per +
                '%</div><br><div style="display:inline-block"><div style="display:inline-block;width:14px"></div>' +
                zjLabel + '：' + zjjsNum[i].zj + '</div>'
              )
            }
            listItem = list.join('<br>');
            return '<div class="showBox"><div>' + a[0].axisValueLabel + '</div>' + listItem + '</div>'
          }
        },
        grid: {
          left: '0%',
          top: '12%',
          right: '1%',
          bottom: '0%',
          containLabel: true
        },
        legend: {
          show: false,
          x: "0%",
          data: unitname,
          textStyle: {
            fontSize: 11, //字体大小
            color: '#bcc7cd' //字体颜色
          },
          itemWidth: 11,
          itemHeight: 11,
          itemGap: 10
        },
        toolbox: {
          show: false,
          orient: 'vertical',
          left: 'right',
          top: 'center',
          feature: {
            mark: {
              show: true
            },
            dataView: {
              show: true,
              readOnly: false
            },
            magicType: {
              show: true,
              type: ['line', 'bar', 'stack', 'tiled']
            },
            restore: {
              show: true
            },
            saveAsImage: {
              show: true
            }
          }
        },
        xAxis: [{
          type: 'category',
          axisTick: {
            show: false
          },
          // splitArea : {show : true},
          axisLine: {
            lineStyle: {
              type: 'solid',
              color: '#bcc7cd',//左边线的颜色
              width: '1'//坐标线的宽度
            }
          },
          data: ['前五名'],
          axisLabel: {
            textStyle: {
              color: "#bcc7cd",
              fontSize: '12',
            }
          },
          splitLine: {
            show: false
          }
        }],
        yAxis: [{
          type: 'value',
          minInterval: 1,
          axisLabel: {
            textStyle: {
              color: "#bcc7cd",
              fontSize: '12',
            }
          },
          axisLine: {
            show: false
          },
          splitLine: {
            lineStyle: {
              color: '#bcc7cd',
              type: 'solid',
            }
          }
        }],
        series: datas
      };

      option && myChart.setOption(option);

      $(document).ready(function () {
        myChart.resize()
      });
      window.addEventListener("resize", function () {
        myChart.resize()
      })
    },
    gzzs1_right(unitname, datas, zjjsNum) { //本周后五名
      var app = {};

      var chartDom = document.getElementById('gzzs1_right');
      var myChart = echarts.init(chartDom);
      var option;

      var posList = [
        'left', 'right', 'top', 'bottom',
        'inside',
        'insideTop', 'insideLeft', 'insideRight', 'insideBottom',
        'insideTopLeft', 'insideTopRight', 'insideBottomLeft', 'insideBottomRight'
      ];

      app.configParameters = {
        rotate: {
          min: -90,
          max: 90
        },
        align: {
          options: {
            left: 'left',
            center: 'center',
            right: 'right'
          }
        },
        verticalAlign: {
          options: {
            top: 'top',
            middle: 'middle',
            bottom: 'bottom'
          }
        },
        position: {
          options: posList.reduce(function (map, pos) {
            map[pos] = pos;
            return map;
          }, {})
        },
        distance: {
          min: 0,
          max: 100
        }
      };


      option = {
        title: {
          text: '本周',
          right: "0",
          top: "0",
          textStyle: {
            color: "#bcc7cd",
            fontSize: 12
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          formatter: function (a) {
            let list = [];
            let listItem = '';
            let zjLabel = "";
            let zjperLabel = "";
            for (var i = 0; i < a.length; i++) {
              if (zjjsNum[i].per < 0) {
                zjperLabel = "减少率"
              } else if (zjjsNum[i].per > 0) {
                zjperLabel = "增长率"
              } else {
                zjperLabel = "增减率"
              }
              if (zjjsNum[i].zj < 0) {
                zjLabel = "减少量"
              } else if (zjjsNum[i].zj > 0) {
                zjLabel = "增长量"
              } else {
                zjLabel = "增减量"
              }
              list.push(
                '<i style="display: inline-block;margin-right:4px;width: 10px;height: 10px;background: ' + a[i]
                  .color.colorStops[1].color + ';border-radius: 50%;}"></i><span style="display:inline-block;">' +
                a[i].seriesName + '</span>：' + a[i].value +
                '<br><div style="display:inline-block"><div style="display:inline-block;width:14px"></div>' +
                zjperLabel + '：' + zjjsNum[i].per +
                '%</div><br><div style="display:inline-block"><div style="display:inline-block;width:14px"></div>' +
                zjLabel + '：' + zjjsNum[i].zj + '</div>'
              )
            }
            listItem = list.join('<br>');
            return '<div class="showBox"><div>' + a[0].axisValueLabel + '</div>' + listItem + '</div>'
          }
        },
        grid: {
          left: '0%',
          top: '12%',
          right: '1%',
          bottom: '0%',
          containLabel: true
        },
        legend: {
          show: false,
          x: "0%",
          data: unitname,
          textStyle: {
            fontSize: 11, //字体大小
            color: '#bcc7cd' //字体颜色
          },
          itemWidth: 11,
          itemHeight: 11,
          itemGap: 10
        },
        toolbox: {
          show: false,
          orient: 'vertical',
          left: 'right',
          top: 'center',
          feature: {
            mark: {
              show: true
            },
            dataView: {
              show: true,
              readOnly: false
            },
            magicType: {
              show: true,
              type: ['line', 'bar', 'stack', 'tiled']
            },
            restore: {
              show: true
            },
            saveAsImage: {
              show: true
            }
          }
        },
        xAxis: [{
          type: 'category',
          axisTick: {
            show: false
          },
          data: ['后五名'],
          axisLine: {
            lineStyle: {
              type: 'solid',
              color: '#bcc7cd',//左边线的颜色
              width: '1'//坐标线的宽度
            }
          },
          axisLabel: {
            textStyle: {
              color: "#bcc7cd",
              fontSize: '12',
            }
          },
          splitLine: {
            show: false
          }
        }],
        yAxis: [{
          type: 'value',
          minInterval: 1,
          axisLabel: {
            textStyle: {
              color: "#bcc7cd",
              fontSize: '12',
            }
          },
          axisLine: {
            show: false
          },
          splitLine: {
            lineStyle: {
              color: '#bcc7cd',
              type: 'solid',
            }
          }
        }],
        series: datas
      };

      option && myChart.setOption(option);

      $(document).ready(function () {
        myChart.resize()
      });
      window.addEventListener("resize", function () {
        myChart.resize()
      })
    },

    gzzs2_left(unitname, datas, zjjsNum) { //上周前五名
      var app = {};

      var chartDom = document.getElementById('gzzs2_left');
      var myChart = echarts.init(chartDom);
      var option;

      var posList = [
        'left', 'right', 'top', 'bottom',
        'inside',
        'insideTop', 'insideLeft', 'insideRight', 'insideBottom',
        'insideTopLeft', 'insideTopRight', 'insideBottomLeft', 'insideBottomRight'
      ];

      app.configParameters = {
        rotate: {
          min: -90,
          max: 90
        },
        align: {
          options: {
            left: 'left',
            center: 'center',
            right: 'right'
          }
        },
        verticalAlign: {
          options: {
            top: 'top',
            middle: 'middle',
            bottom: 'bottom'
          }
        },
        position: {
          options: posList.reduce(function (map, pos) {
            map[pos] = pos;
            return map;
          }, {})
        },
        distance: {
          min: 0,
          max: 100
        }
      };


      option = {
        title: {
          text: '上周',
          right: "0",
          top: "0",
          textStyle: {
            color: "#bcc7cd",
            fontSize: 12
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          formatter: function (a) {
            let list = [];
            let listItem = '';
            let zjLabel = "";
            let zjperLabel = "";
            for (var i = 0; i < a.length; i++) {
              if (zjjsNum[i].per < 0) {
                zjperLabel = "减少率"
              } else if (zjjsNum[i].per > 0) {
                zjperLabel = "增长率"
              } else {
                zjperLabel = "增减率"
              }
              if (zjjsNum[i].zj < 0) {
                zjLabel = "减少量"
              } else if (zjjsNum[i].zj > 0) {
                zjLabel = "增长量"
              } else {
                zjLabel = "增减量"
              }
              list.push(
                '<i style="display: inline-block;margin-right:4px;width: 10px;height: 10px;background: ' + a[i]
                  .color.colorStops[1].color + ';border-radius: 50%;}"></i><span style="display:inline-block;">' +
                a[i].seriesName + '</span>：' + a[i].value +
                '<br><div style="display:inline-block"><div style="display:inline-block;width:14px"></div>' +
                zjperLabel + '：' + zjjsNum[i].per +
                '%</div><br><div style="display:inline-block"><div style="display:inline-block;width:14px"></div>' +
                zjLabel + '：' + zjjsNum[i].zj + '</div>'
              )
            }
            listItem = list.join('<br>');
            return '<div class="showBox"><div>' + a[0].axisValueLabel + '</div>' + listItem + '</div>'
          }
        },
        grid: {
          left: '0%',
          top: '12%',
          right: '1%',
          bottom: '0%',
          containLabel: true
        },
        legend: {
          show: false,
          x: "0%",
          data: unitname,
          textStyle: {
            fontSize: 11, //字体大小
            color: '#bcc7cd' //字体颜色
          },
          itemWidth: 11,
          itemHeight: 11,
          itemGap: 10
        },
        toolbox: {
          show: false,
          orient: 'vertical',
          left: 'right',
          top: 'center',
          feature: {
            mark: {
              show: true
            },
            dataView: {
              show: true,
              readOnly: false
            },
            magicType: {
              show: true,
              type: ['line', 'bar', 'stack', 'tiled']
            },
            restore: {
              show: true
            },
            saveAsImage: {
              show: true
            }
          }
        },
        xAxis: [{
          type: 'category',
          axisTick: {
            show: false
          },
          data: ['前五名'],
          axisLine: {
            lineStyle: {
              type: 'solid',
              color: '#bcc7cd',//左边线的颜色
              width: '1'//坐标线的宽度
            }
          },
          axisLabel: {
            textStyle: {
              color: "#bcc7cd",
              fontSize: '12',
            }
          },
          splitLine: {
            show: false
          }
        }],
        yAxis: [{
          type: 'value',
          minInterval: 1,
          axisLabel: {
            textStyle: {
              color: "#bcc7cd",
              fontSize: '12',
            }
          },
          axisLine: {
            show: false
          },
          splitLine: {
            lineStyle: {
              color: '#bcc7cd',
              type: 'solid',
            }
          }
        }],
        series: datas,
      };

      option && myChart.setOption(option);

      $(document).ready(function () {
        myChart.resize()
      });
      window.addEventListener("resize", function () {
        myChart.resize()
      })
    },
    gzzs2_right(unitname, datas, zjjsNum) { //上周后五名
      var app = {};

      var chartDom = document.getElementById('gzzs2_right');
      var myChart = echarts.init(chartDom);
      var option;

      var posList = [
        'left', 'right', 'top', 'bottom',
        'inside',
        'insideTop', 'insideLeft', 'insideRight', 'insideBottom',
        'insideTopLeft', 'insideTopRight', 'insideBottomLeft', 'insideBottomRight'
      ];

      app.configParameters = {
        rotate: {
          min: -90,
          max: 90
        },
        align: {
          options: {
            left: 'left',
            center: 'center',
            right: 'right'
          }
        },
        verticalAlign: {
          options: {
            top: 'top',
            middle: 'middle',
            bottom: 'bottom'
          }
        },
        position: {
          options: posList.reduce(function (map, pos) {
            map[pos] = pos;
            return map;
          }, {})
        },
        distance: {
          min: 0,
          max: 100
        }
      };


      option = {
        title: {
          text: '上周',
          right: "0",
          top: "0",
          textStyle: {
            color: "#bcc7cd",
            fontSize: 12
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          formatter: function (a) {
            let list = [];
            let listItem = '';
            let zjLabel = "";
            let zjperLabel = "";
            for (var i = 0; i < a.length; i++) {
              if (zjjsNum[i].per < 0) {
                zjperLabel = "减少率"
              } else if (zjjsNum[i].per > 0) {
                zjperLabel = "增长率"
              } else {
                zjperLabel = "增减率"
              }
              if (zjjsNum[i].zj < 0) {
                zjLabel = "减少量"
              } else if (zjjsNum[i].zj > 0) {
                zjLabel = "增长量"
              } else {
                zjLabel = "增减量"
              }
              list.push(
                '<i style="display: inline-block;margin-right:4px;width: 10px;height: 10px;background: ' + a[i]
                  .color.colorStops[1].color + ';border-radius: 50%;}"></i><span style="display:inline-block;">' +
                a[i].seriesName + '</span>：' + a[i].value +
                '<br><div style="display:inline-block"><div style="display:inline-block;width:14px"></div>' +
                zjperLabel + '：' + zjjsNum[i].per +
                '%</div><br><div style="display:inline-block"><div style="display:inline-block;width:14px"></div>' +
                zjLabel + '：' + zjjsNum[i].zj + '</div>'
              )
            }
            listItem = list.join('<br>');
            return '<div class="showBox"><div>' + a[0].axisValueLabel + '</div>' + listItem + '</div>'
          }
        },
        grid: {
          left: '0%',
          top: '12%',
          right: '1%',
          bottom: '0%',
          containLabel: true
        },
        legend: {
          show: false,
          x: "0%",
          data: unitname,
          textStyle: {
            fontSize: 11, //字体大小
            color: '#bcc7cd' //字体颜色
          },
          itemWidth: 11,
          itemHeight: 11,
          itemGap: 10
        },
        toolbox: {
          show: false,
          orient: 'vertical',
          left: 'right',
          top: 'center',
          feature: {
            mark: {
              show: true
            },
            dataView: {
              show: true,
              readOnly: false
            },
            magicType: {
              show: true,
              type: ['line', 'bar', 'stack', 'tiled']
            },
            restore: {
              show: true
            },
            saveAsImage: {
              show: true
            }
          }
        },
        xAxis: [{
          type: 'category',
          axisTick: {
            show: false
          },
          data: ['后五名'],
          axisLine: {
            lineStyle: {
              type: 'solid',
              color: '#bcc7cd',//左边线的颜色
              width: '1'//坐标线的宽度
            }
          },
          axisLabel: {
            textStyle: {
              color: "#bcc7cd",
              fontSize: '12',
            }
          },
          splitLine: {
            show: false
          }
        }],
        yAxis: [{
          type: 'value',
          minInterval: 1,
          axisLabel: {
            textStyle: {
              color: "#bcc7cd",
              fontSize: '12',
            }
          },
          axisLine: {
            show: false
          },
          splitLine: {
            lineStyle: {
              color: '#bcc7cd',
              type: 'solid',
            }
          }
        }],
        series: datas
      };

      option && myChart.setOption(option);

      $(document).ready(function () {
        myChart.resize()
      });
      window.addEventListener("resize", function () {
        myChart.resize()
      })
    },
    rgba() { //rgb颜色随机
      var r = Math.floor(Math.random() * 256);
      var g = Math.floor(Math.random() * 256);
      var b = Math.floor(Math.random() * 256);
      var rgba = 'rgb(' + r + ',' + g + ',' + b + ',.75)';
      return rgba;
    },


  },


}
</script>

